<!DOCTYPE html>
<!-- saved from url=(0035)http://www.html-js.com/article/2953 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123">
    <link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/main.css" type="text/css">
    <link rel="stylesheet" href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/prettify.css" type="text/css">
    <link rel="stylesheet" href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/glyphicons.css" type="text/css">
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/jquery.js"></script>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/htmljs.js"></script>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/prettify.js"></script><meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon">
    <meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime">
    <meta name="baidu-site-verification" content="OnKVgNu37S">
    <script>if($.browser.msie<8){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script>
    <title>前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖</title><meta name="description" content="来自https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/Translations/Chinese/R">
    <style>
      #bdshare a{}
      .ad-blank{opacity:0.6;}
    </style>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/bootstrap-tooltip.js"></script>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/bootstrap-scrollspy.js"></script>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/tips.js"></script>
    <link rel="stylesheet" href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/tips.css" type="text/css">
  <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/logger.js"></script><link href="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/bdsstyle.css" rel="stylesheet" type="text/css"></head>
  <body id="article"><iframe frameborder="0" style="display: none;" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/saved_resource.html"></iframe>
    <div id="header">
      <div class="wrapper clearfix"><a href="http://www.html-js.com/" title="前端乱炖" class="logo"><span class="dun">炖</span></a>
        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <div class="container">
              <div class="nav-collapse collapse">
                <ul class="nav left-nav">
                  <li pageid="0" class=""><a href="http://www.html-js.com/"><i class="icon-home"></i>首页</a></li>
                  <li pageid="1" class="active"><a href="http://www.html-js.com/article"><i class="icon-book-open"></i>专栏</a></li>
                  <li pageid="7" class=""><a href="http://www.html-js.com/qa"><i class="icon-lightbulb"></i>问答</a></li>
                  <li pageid="10" class=""><a href="http://www.html-js.com/topic"><i class="icon-group"></i>讨论区</a></li>
                  <li pageid="20" class="hidden "><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>实时讨论</a></li>
                  <li pageid="15" class="hidden "><a href="http://www.html-js.com/blog"><i class="icon-sampler"></i>博集</a></li>
                  <li pageid="8" class="hidden "><a href="http://www.html-js.com/tag">标签</a></li>
                  <li pageid="2" class="hidden "><a href="http://www.html-js.com/job"><i class="icon-leaf"></i>招聘</a></li>
                  <li pageid="2" class=""><a href="http://www.html-js.com/cards"><i class="icon-nameplate"></i>花名册</a></li>
                  <li pageid="101" class=""><a href="http://www.jiankongbao.com/labs/http">免费性能测试</a></li>
                  <li class="search">
                    <form action="http://www.html-js.com/search" method="get" style="margin:0;"><i class="icon-search"></i>
                      <input id="keyword" type="text" name="q" placeholder="搜索全站、站外内容" class="span2 input-large">
                    </form>
                  </li>
                  <li pageid="6" class="hidden "><a href="http://www.html-js.com/book">免费送书</a></li>
                </ul>
                <ul class="right-nav">
                  <li><a href="http://www.html-js.com/user/login?redirect=%2Farticle%2F2953">登录</a></li>
                  <li><a href="http://www.html-js.com/talk"><i class="icon-conversation"></i>在线聊天</a></li>
                  <li class="hidden sub-trigger"><a>其他功能</a>
                    <ul class="sub-menu hidden">
                      <li pageid="5" class=""><a href="http://www.html-js.com/act">活动</a></li>
                      <li pageid="9" class=""><a href="http://www.html-js.com/tools"><i class="icon-classic-hammer hidden"></i>常用工具</a><span class="my-favs"></span></li>
                      <li><a href="http://www.html-js.com/talk">
                           
                          实时讨论</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $(".sub-trigger").mouseenter(function(){
          $(".sub-menu",this).removeClass("hidden")
          }).mouseleave(function(){
          $(".sub-menu",this).addClass("hidden")
          })
        })       
    </script>
    <div id="content" class="clearfix">
      <div class="daen"></div>
      <ul class="breadcrumb hidden">
        <li><a href="http://www.html-js.com/">首页</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article">所有专栏</a><span class="divider">/</span></li>
        <li><a href="http://www.html-js.com/article/column/5">前端乱炖官方</a><span class="divider">/</span></li>
        <li class="active"><span>前端工作面试问题总结 Front-end-Developer-Interview-Questions</span></li>
      </ul>
      <div class="title">
        <div class="wrapper">
          <div style="font-size: 30px;line-height:50px;" href="http://p.html-js.com/article/2953" title="前端工作面试问题总结 Front-end-Developer-Interview-Questions" rel="bookmark" class="75">前端工作面试问题总结 Front-end-Developer-Interview-Questions</div>
          <div class="info">
            <div class="line"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/34" class="value url fn">前端乱炖</a> 发布在<a href="http://www.html-js.com/article/column/5" class="value">前端乱炖官方</a></span><span class="item">2015年5月25日</span><span class="item"><span class="index">view：</span><span class="value">4849</span></span><span style="margin-right:10px;color:#999;" class="item">开源项目</span><span style="margin-right:10px;color:#999;" class="item">前端开发</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-wapper">
        <div class="content">
          <div class="left"><a href="http://gold.xitu.io/extension/?utm_source=htmljs&amp;utm_medium=banner&amp;utm_content=juhe&amp;utm_campaign=q3_extension" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1473249478180-b6709d870b90063575966bf1bcd8dee4.png"></a><a href="https://zhuanlan.zhihu.com/p/23538432" style="margin-top:20px;opacity:1;display:block;background: #eee;margin: 10px 0;cursor: pointer;"> <img src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1478698438615-65e11a061e85c4b9367a6477bb08a6ba.png"></a>
            <div style="margin-top:20px;" class="alert">在文章任何区域双击击即可给文章添加【评注】！浮到评注点上可以查看详情。<div class="checkbox" style="float:right;line-height:40px;color:#333;padding-top:3px;"><label><input type="checkbox" id="hide_tip">隐藏标注</label></div></div>
            <article id="post-2953" style="overflow:hidden;" class="post">
              <div class="wrapper">
                <div style="padding-top:0;" class="entry-content"><!--<a href="http://passport.lagou.com/landingPage.html?utm_source=AD__html-js&amp;utm_medium=banner&amp;utm_campaign=lp" class="ad-blank"></a><img src="http://htmljs.b0.upaiyun.com/uploads/1439192041460-7786e01e91744693f0cc2c15f7ce9ab3.png">--><p>来自 <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/Translations/Chinese/README.md">https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/Translations/Chinese/README.md</a> </p>

<h1>前端工作面试问题</h1>

<p><strong>备注:</strong> 本 repo 包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题（那需要好几个小时）。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能了。</p>

<p><a href="http://rmurphey.com/">Rebecca Murphey</a> 的 <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">Baseline For Front-End Developers</a> 是你在准备面试前应该阅读的绝佳资源。</p>

<p><strong>记住：</strong> 很多问题都是开放的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。</p>

<h2><a>目录</a></h2>

<ol>
<li><a href="http://www.html-js.com/article/2953#contributors">最初的贡献者</a></li>
<li><a href="http://www.html-js.com/article/2953#general">常见问题</a></li>
<li><a href="http://www.html-js.com/article/2953#html">HTML 相关问题</a></li>
<li><a href="http://www.html-js.com/article/2953#css">CSS 相关问题</a></li>
<li><a href="http://www.html-js.com/article/2953#js">JS 相关问题</a></li>
<li><a href="http://www.html-js.com/article/2953#jquery">jQuery 相关问题</a></li>
<li><a href="http://www.html-js.com/article/2953#jscode">代码相关的问题</a></li>
<li><a href="http://www.html-js.com/article/2953#fun">有趣的问题</a></li>
<li><a href="http://www.html-js.com/article/2953#references">其他参考资料</a></li>
<li><a href="http://www.html-js.com/article/2953#license">协议</a></li>
</ol>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>最初贡献者</a></h4>

<p>这里大部分的面试题都摘抄自 <a href="http://paulirish.com/">Paul Irish</a> (<a href="http://twitter.com/paul_irish">@paul_irish</a>) 在 <a href="http://oksoclap.com/">oksoclap</a> 创建的帖子，这份原帖的贡献者还有：</p>

<ul>
<li><a href="http://twitter.com/bentruyman">@bentruyman</a> - <a href="http://bentruyman.com/">http://bentruyman.com</a></li>
<li><a href="http://twitter.com/cowboy">@cowboy</a> - <a href="http://benalman.com/">http://benalman.com</a></li>
<li><a href="http://ajpiano/">@ajpiano</a> - <a href="http://ajpiano.com/">http://ajpiano.com</a></li>
<li><a href="http://twitter.com/slexaxton">@SlexAxton</a> - <a href="http://alexsexton.com/">http://alexsexton.com</a></li>
<li><a href="http://twitter.com/boazsender">@boazsender</a> - <a href="http://boazsender.com/">http://boazsender.com</a></li>
<li><a href="http://twitter.com/miketaylr">@miketaylr</a> - <a href="http://miketaylr.com/">http://miketaylr.com</a></li>
<li><a href="http://twitter.com/vladikoff">@vladikoff</a> - <a href="http://vladfilippov.com/">http://vladfilippov.com</a></li>
<li><a href="http://twitter.com/gf3">@gf3</a> - <a href="http://gf3.ca/">http://gf3.ca</a></li>
<li><a href="http://twitter.com/jon_neal">@jon_neal</a> - <a href="http://twitter.com/jon_neal">http://twitter.com/jon_neal</a></li>
<li><a href="http://twitter.com/wookiehangover">@wookiehangover</a> - <a href="http://wookiehangover.com/">http://wookiehangover.com</a></li>
<li><a href="http://twitter.com/darcy">@darcy_clarke</a> - <a href="http://darcyclarke.me/">http://darcyclarke.me</a></li>
<li><a href="http://twitter.com/iansym">@iansym</a></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>常见问题：</a></h4>

<ul>
<li><p>你在昨天/本周学到了什么？</p></li>
<li><p>编写代码的哪些方面能够使你兴奋或感兴趣？</p></li>
<li><p>在制作一个Web应用或Web站点的过程中，你是如何考虑它的UI、安全性、高性能、SEO、可维护性以及技术因素的？</p></li>
<li><p>谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。)</p></li>
<li><p>你最熟悉哪一套版本控制系统？</p></li>
<li><p>你能描述一下当你制作一个网页的工作流程吗？</p></li>
<li><p>你能描述一下渐进增强和优雅降级之间的不同吗?</p>

<ul><li>如果提到了特性检测，可以加分。</li></ul></li>
<li><p>假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?</p>

<ul><li>文件拼合</li></ul></li>
<li><p>你如何对网站的文件和资源进行优化？</p>

<ul><li>期待的解决方案包括：
<ul><li>文件合并</li>
<li>文件最小化/文件压缩</li>
<li>使用 CDN 托管</li>
<li>缓存的使用</li>
<li>其他</li></ul></li></ul></li>
<li><p>为什么利用多个域名来提供网站资源会更有效？</p>

<ul><li>浏览器同一时间可以从一个域名下载多少资源？</li>
<li>有什么例外吗？
<ul><li>加分项： 指出在手机端可能有负面影响 (<a href="http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/"></a><a href="http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/">http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/</a>)</li>
<li>加分项： HTTP2 / SPDY</li></ul></li></ul></li>
<li><p>请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）</p></li>
<li><p>如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？</p>

<ul><li>建议这个项目使用像 EditorConfig (<a href="http://editorconfig.org/">http://editorconfig.org/</a>) 之类的规范</li>
<li>为了保持一致性，接受项目原有的风格</li>
<li>直接使用 VIM 的 retab 命令</li></ul></li>
<li><p>请写一个简单的幻灯效果页面</p>

<ul><li>如果不使用JS来完成，可以加分。</li></ul></li>
<li><p>你都使用哪些工具来测试代码的性能？</p>

<ul><li>Profiler, JSPerf, Dromaeo</li></ul></li>
<li><p>如果今年你打算熟练掌握一项新技术，那会是什么？</p></li>
<li><p>Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？</p></li>
<li><p>请谈一下你对网页标准和标准制定机构重要性的理解。</p></li>
<li><p>什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？</p></li>
<li><p>请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程</p></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>HTML相关问题：</a></h4>

<ul>
<li><p><code class=" language-javascript">doctype</code>（文档类型）的作用是什么？</p></li>
<li><p>浏览器标准模式和怪异模式之间的区别是什么？</p></li>
<li><p>使用 XHTML 的局限有哪些？</p>

<ul><li>如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？</li></ul></li>
<li><p>如果网页内容需要支持多语言，你会怎么做？</p>

<ul><li>在设计和开发多语言网站时，有哪些问题你必须要考虑？</li></ul></li>
<li><p><code class=" language-javascript">data<span class="token operator">-</span></code>属性的作用是什么？</p></li>
<li><p>如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？</p></li>
<li><p>请描述一下 cookies，sessionStorage 和 localStorage 的区别？</p></li>
<li><p>请描述一下 <code class=" language-javascript">GET</code> 和 <code class=" language-javascript">POST</code> 的区别?</p></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>CSS 相关问题：</a></h4>

<ul>
<li><p>CSS 中类(classes)和 ID 的区别。</p></li>
<li><p>描述下 “reset” CSS 文件的作用和使用它的好处。</p>

<ul><li>期待能够指出它的负面影响，或者提到它的一个更好的替换者”normalize”</li></ul></li>
<li><p>解释下浮动和它的工作原理。</p></li>
<li><p>描述<code class=" language-javascript">z<span class="token operator">-</span>index</code>和叠加上下文是如何形成的。</p></li>
<li><p>列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。</p></li>
<li><p>解释下 CSS sprites，以及你要如何在页面或网站中实现它。</p></li>
<li><p>你最喜欢的图片替换方法是什么，你如何选择使用。</p></li>
<li><p>讨论CSS hacks，条件引用或者其他。</p></li>
<li><p>如何为有功能限制的浏览器提供网页？</p>

<ul><li>你会使用哪些技术和处理方法？</li></ul></li>
<li><p>有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）</p></li>
<li><p>你用过栅格系统吗？如果使用过，你最喜欢哪种？</p></li>
<li><p>你用过媒体查询，或针对移动端的布局/CSS 吗？</p></li>
<li><p>你熟悉 SVG 样式的书写吗？</p></li>
<li><p>如何优化网页的打印样式？</p></li>
<li><p>在书写高效 CSS 时会有哪些问题需要考虑？</p></li>
<li><p>使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)</p>

<ul><li>描述下你曾经使用过的 CSS 预处理的优缺点。</li></ul></li>
<li><p>如果设计中使用了非标准的字体，你该如何去实现？</p>

<ul><li>Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)</li></ul></li>
<li><p>解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？</p></li>
<li><p>解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。</p></li>
<li><p>请解释一下 <code class=" language-javascript"><span class="token operator">*</span> <span class="token punctuation">{</span> box<span class="token operator">-</span>sizing<span class="token punctuation">:</span> border<span class="token operator">-</span>box<span class="token punctuation">;</span> <span class="token punctuation">}</span></code> 的作用, 并且说明使用它有什么好处？</p></li>
<li><p>请罗列出你所知道的 display 属性的全部值</p></li>
<li><p>请解释一下 inline 和 inline-block 的区别？</p></li>
<li><p>请解释一下 relative、fixed、absolute 和 static 元素的区别</p></li>
<li><p>你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等)</p>

<ul><li>如果有，请问是哪一套？如果可以，你如何改善CSS框架？</li></ul></li>
<li><p>请问你有使用过 CSS Flexbox 或者 Grid specs 吗？</p>

<ul><li>如果有，请问在性能和效率的方面你是怎么看的？</li></ul></li>
<li><p>为什么响应式设计（responsive design）和自适应设计（adaptive design）不同？</p></li>
<li><p>你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？</p></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>JS相关问题：</a></h4>

<ul>
<li><p>解释下事件代理。</p></li>
<li><p>解释下 JavaScript 中 <code class=" language-javascript">this</code> 是如何工作的。</p></li>
<li><p>解释下原型继承的原理。</p></li>
<li><p>你是如何测试 JavaScript 代码的？</p></li>
<li><p>AMD vs. CommonJS？</p></li>
<li><p>什么是哈希表？</p></li>
<li><p>解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：<code class=" language-javascript"><span class="token keyword">function</span> <span class="token function">foo<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>.</p>

<ul><li>要做哪些改动使它变成 IIFE?</li></ul></li>
<li><p>描述以下变量的区别：<code class=" language-javascript"><span class="token keyword">null</span></code>，<code class=" language-javascript">undefined</code> 或 <code class=" language-javascript">undeclared</code>？</p>

<ul><li>该如何检测它们？</li></ul></li>
<li><p>什么是闭包，如何使用它，为什么要使用它？</p></li>
<li><p>请举出一个匿名函数的典型用例？</p></li>
<li><p>解释 “JavaScript 模块模式” 以及你在何时使用它。</p>

<ul><li>如果有提到无污染的命名空间，可以考虑加分。</li>
<li>如果你的模块没有自己的命名空间会怎么样？</li></ul></li>
<li><p>你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？</p></li>
<li><p>请指出 JavaScript 宿主对象和原生对象的区别？</p></li>
<li><p>指出下列代码的区别：</p></li>
</ul>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token keyword">function</span> <span class="token function">Person<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token function">Person<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

<ul>
<li><p><code class=" language-javascript"><span class="token punctuation">.</span>call</code> 和 <code class=" language-javascript"><span class="token punctuation">.</span>apply</code> 的区别是什么？</p></li>
<li><p>请解释 <code class=" language-javascript">Function<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>bind</code>？</p></li>
<li><p>你何时优化自己的代码？</p></li>
<li><p>在什么时候你会使用 <code class=" language-javascript">document<span class="token punctuation">.</span><span class="token function">write<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code>？</p>

<ul><li>大多数生成的广告代码依旧使用 <code class=" language-javascript">document<span class="token punctuation">.</span><span class="token function">write<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code>，虽然这种用法会让人很不爽。</li></ul></li>
<li><p>请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？</p></li>
<li><p>请尽可能详尽的解释 AJAX 的工作原理。</p></li>
<li><p>请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。</p></li>
<li><p>你使用过 JavaScript 模板系统吗？</p>

<ul><li>如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。</li></ul></li>
<li><p>请解释变量声明提升。</p></li>
<li><p>请描述下事件冒泡机制。</p></li>
<li><p>“attribute” 和 “property” 的区别是什么？</p></li>
<li><p>为什么扩展 JavaScript 内置对象不是好的做法？</p></li>
<li><p>请指出 document load 和 document ready 两个事件的区别。</p></li>
<li><p><code class=" language-javascript"><span class="token operator">==</span></code> 和 <code class=" language-javascript"><span class="token operator">===</span></code> 有什么不同？</p></li>
<li><p>请解释一下 JavaScript 的同源策略。</p></li>
<li><p>如何实现下列代码：</p></li>
</ul>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">duplicator<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // [1,2,3,4,5,1,2,3,4,5]</span></code></pre>

<ul>
<li><p>什么是三元表达式？“三元” 表示什么意思？</p></li>
<li><p>什么是 <code class=" language-javascript"><span class="token string">"use strict"</span><span class="token punctuation">;</span></code> ? 使用它的好处和坏处分别是什么？</p></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>jQuery 相关问题：</a></h4>

<ul>
<li><p>解释”chaining”。</p></li>
<li><p>解释”deferreds”。</p></li>
<li><p>你知道哪些针对 jQuery 的优化方法。</p></li>
<li><p>请解释 <code class=" language-javascript"><span class="token punctuation">.</span><span class="token function">end<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的用途。</p></li>
<li><p>你如何给一个事件处理函数命名空间，为什么要这样做？</p></li>
<li><p>请说出你可以传递给 jQuery 方法的四种不同值。</p>

<ul><li>选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。</li></ul></li>
<li><p>什么是效果队列？</p></li>
<li><p>请指出 <code class=" language-javascript"><span class="token punctuation">.</span><span class="token function">get<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code>，<code class=" language-javascript"><span class="token punctuation">[</span><span class="token punctuation">]</span></code>，<code class=" language-javascript"><span class="token function">eq<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的区别。</p></li>
<li><p>请指出 <code class=" language-javascript"><span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code>，<code class=" language-javascript"><span class="token punctuation">.</span><span class="token function">live<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 和 <code class=" language-javascript"><span class="token punctuation">.</span><span class="token function">delegate<span class="token punctuation">(</span></span><span class="token punctuation">)</span></code> 的区别。</p></li>
<li><p>请指出 <code class=" language-javascript">$</code> 和 <code class=" language-javascript">$<span class="token punctuation">.</span>fn</code> 的区别，或者说出 <code class=" language-javascript">$<span class="token punctuation">.</span>fn</code> 的用途。</p></li>
<li><p>请优化下列选择器：</p></li>
</ul>

<pre class=" language-javascript"><code class=" language-javascript">$<span class="token punctuation">(</span><span class="token string">".foo div#bar:eq(0)"</span><span class="token punctuation">)</span></code></pre>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>代码相关的问题：</a></h4>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token function">modulo<span class="token punctuation">(</span></span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true"> // 2</span></code></pre>

<p>问题：实现满足上述结果的modulo函数</p>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token string">"i'm a lasagna hog"</span><span class="token punctuation">.</span><span class="token function">split<span class="token punctuation">(</span></span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join<span class="token punctuation">(</span></span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

<p>问题：上面的语句的返回值是什么？
<strong>答案：”goh angasal a m’i”</strong></p>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">||</span> <span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"bar"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

<p>问题：window.foo 的值是什么？
<strong>答案：”bar”</strong>
只有 window.foo 为假时的才是上面答案，否则就是它本身的值。</p>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token string">" World"</span><span class="token punctuation">;</span> <span class="token function">alert<span class="token punctuation">(</span></span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert<span class="token punctuation">(</span></span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

<p>问题：上面两个 alert 的结果是什么
<strong>答案: “Hello World” 和 ReferenceError: bar is not defined</strong></p>

<pre class=" language-javascript"><code class=" language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
foo<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
foo<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

<p>问题：foo.length 的值是什么？
<strong>答案：<code class=" language-javascript"><span class="token number">2</span></code></strong></p>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>有趣的问题：</a></h4>

<ul>
<li><p>你编写过的最酷的代码是什么？其中你最自豪的是什么？</p></li>
<li><p>在你使用的开发工具中，最喜欢哪些方面？</p></li>
<li><p>你有什么业余项目吗？是哪种类型的？</p></li>
<li><p>你最爱的 IE 特性是什么？</p></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>其他参考资料：</a></h4>

<ul>
<li><a href="http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before">http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before</a></li>
<li><a href="http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/">http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/</a></li>
<li><a href="http://css-tricks.com/interview-questions-css/">http://css-tricks.com/interview-questions-css/</a></li>
<li><a href="http://davidshariff.com/quiz/">http://davidshariff.com/quiz/</a></li>
<li><a href="http://blog.sourcing.io/interview-questions">http://blog.sourcing.io/interview-questions</a></li>
<li><a href="http://www.toptal.com/javascript/interview-questions">http://www.toptal.com/javascript/interview-questions</a></li>
</ul>

<h4><a href="http://www.html-js.com/article/2953#toc">[⬆]</a> <a>协议:</a></h4>

<p>Copyright 2012 by Darcy Clarke, 基于<a href="http://opensource.org/licenses/MIT">MIT License</a> 协议。点击协议文件查看详细。</p><script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/tuiku.js"></script>
                </div>
                <div class="entry-meta">
                  <p>本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接(<a href="http://www.html-js.com/article/2953">http://www.html-js.com/article/2953</a>)，本站和作者保留随时要求删除文章的权利！</p>
                </div>
              </div>
            <div class="tip-comments" style="display: none;"><ul class="comment-list"></ul><form class="tip-comment-form"><textarea placeholder="添加讨论…" class="tip-comment-textarea"></textarea><div class="form-control"><button class="tip-submit" type="submit">提交</button></div></form></div></article>
            <div id="comment" class="comment module">
              <div class="hd">评论</div>
              <div class="bd">
                <div class="publish">
                  <textarea id="comment-text" placeholder="参与讨论。支持markdown语法" class="input-block-level"></textarea>
                  <div id="comment-submit" class="btn comment-submit">发表评论</div>
                </div>
                <div class="comment-list">
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp4.sinaimg.cn/2137609447/50/5677644081/1" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/8296" class="value url fn">vividpisces</a>
                          <div class="hd-time">8个月前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="vividpisces" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp1.sinaimg.cn/1823650080/50/5716127990/1" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/6535" class="value url fn">trigkit4</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="trigkit4" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp1.sinaimg.cn/3473034184/50/40024593772/0" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/0" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/575" class="value url fn">jane</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="jane" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp3.sinaimg.cn/1930795102/50/5702261736/1" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(1)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/5922" class="value url fn">QDavid</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="QDavid" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp2.sinaimg.cn/5479886185/50/5716256372/1" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(2)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/5639" class="value url fn">leozdgao</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="leozdgao" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp1.sinaimg.cn/1870227420/50/5638195393/1" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/618" class="value url fn">小眾灬聳聳肩膀</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html"><p>我也想知道 “你最爱的 IE 特性是什么”？因为现在基本不用 IE 了，也没研究它的特性，一直移动端了！</p></div>
                      </div>
                      <div class="time"><a data-nick="小眾灬聳聳肩膀" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp1.sinaimg.cn/1681452992/50/5623128906/1" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(3)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/2619" class="value url fn">阿凯古</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="阿凯古" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp2.sinaimg.cn/1771176701/50/5710163838/1" width="70" height="70" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(4)" style="display: inline;"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/6159" class="value url fn">honeien</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html">赞了此文章！</div>
                      </div>
                      <div class="time"><a data-nick="honeien" class="reply">回复</a></div>
                    </div>
                  </div>
                  <div class="comment-item clearfix"><a class="headpic"><img data-original="http://tp1.sinaimg.cn/2152230212/50/5641567556/1" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="http://www.html-js.com/user/1080" class="value url fn">我是Feng_我为自己代言</a>
                          <div class="hd-time">1年前</div></span>
                        <div class="html"><p>这个资源，都那么齐全。。。可以搞个《通过BAT前端面试》专栏了。。</p></div>
                      </div>
                      <div class="time"><a data-nick="我是Feng_我为自己代言" class="reply">回复</a></div>
                    </div>
                  </div>
                </div>
                <script id="comment-tpl" type="text/template">
                  <div class="comment-item clearfix"><a class="headpic"><img src="{{user_headpic}}" width="70" height="70"></a>
                    <div class="comment-right">
                      <div class="con"><span class="author vcard item"><a rel="author" href="/user/{{user_id}}" class="value url fn">{{user_nick}}：</a></span>
                        <div class="html">{{{html}}}</div>
                      </div>
                      <div class="time">{{createdAt}}<a data-nick="{{user_nick}}" class="reply">回复</a></div>
                    </div>
                  </div>
                </script>
              </div>
            </div>
          </div>
        </div>
        <div class="right"><!--<a target="_blank" href="http://www.oneapm.com/bi/feature.html?utm_source=htmljs&amp;utm_medium=billboard&amp;utm_term=bi&amp;utm_campaign=JulyTechAds&amp;from=maadfisejs" style="width:100%;display:block;margin-top:20px;" class="ad-blank"><img src="http://htmljs.b0.upaiyun.com/uploads/1436597035936-4450bd15970bac6348a570d12c151324.png"></a>-->
          <div style="padding:0;margin-top:20px;" class="module"><img src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1417158556053-未标题-5.png"></div>
          <div class="writer-and-column clearfix">
            <div class="writer module">
              <div class="hd">WRITTEN BY</div>
              <!--a.head-pic(href="/user/#{writer.id}")-->
              <!--  img(src='#{writer.head_pic}')-->
              <div class="info"><a href="http://www.html-js.com/user/34" class="nick">前端乱炖</a>
                <div class="desc">专注前端技术和关爱前端人员情感问题20年 http://www.html-js.com</div><a href="http://weibo.cn/1734409185" target="_blank" class="weibo">TA的新浪微博</a>
              </div>
            </div>
            <div class="column module">
              <div class="hd">PUBLISHED IN</div>
              <div class="info"><a href="http://www.html-js.com/article/column/5" class="name">前端乱炖官方</a>
                <div class="desc"><p>官方发言，活动通知，总结等。</p></div>
                <div class="action"><a href="http://www.html-js.com/article/column/1/rss" class="rssit btn small-btn"><i class="rss social"></i> 订阅</a></div>
              </div>
            </div>
          </div>
          <div class="other-articles module">
            <div class="hd">本专栏其他文章</div>
            <div class="bd">
              <div class="item"><a href="http://www.html-js.com/article/3441">前端乱炖网站2015年最受欢迎的20篇原创技术文章</a>
                <div class="others"><span class="time">时间:2016-02-25</span><span class="visit_count">浏览:2571</span><span class="zan_count">赞:2</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/2953">前端工作面试问题总结 Front-end-Developer-Interview-Questions</a>
                <div class="others"><span class="time">时间:2015-05-25</span><span class="visit_count">浏览:4849</span><span class="zan_count">赞:7</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/2567">我在 App Store 上架过程中遇到的那些坑</a>
                <div class="others"><span class="time">时间:2015-01-07</span><span class="visit_count">浏览:2653</span><span class="zan_count">赞:1</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/2494">关于专栏刚上线的新功能【评注】</a>
                <div class="others"><span class="time">时间:2014-12-02</span><span class="visit_count">浏览:22863</span><span class="zan_count">赞:7</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/2476">近期干货文章精选（11月28日）</a>
                <div class="others"><span class="time">时间:2014-11-28</span><span class="visit_count">浏览:2719</span><span class="zan_count">赞:4</span></div>
              </div>
              <div class="item"><a href="http://www.html-js.com/article/2426">近期精品文章推荐（11月18日）</a>
                <div class="others"><span class="time">时间:2014-11-18</span><span class="visit_count">浏览:2495</span><span class="zan_count">赞:0</span></div>
              </div>
            </div>
          </div>
          <div class="bottom-action module">
            <div class="wrapper">
              <div class="actions"><a href="javascript:void(0);" class="zan action"><i class="icon-thumbs-up"></i><em>赞</em> <span>7</span></a><span class="zanlogs"><a href="http://www.html-js.com/user/8296" data-original-title="To be or not to be?
I choose to be!" class="tooltip-trigger"><img data-original="http://tp4.sinaimg.cn/2137609447/50/5677644081/1" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1" style="display: inline;"></a><a href="http://www.html-js.com/user/6535" data-original-title="美团前端开发实习生" class="tooltip-trigger"><img data-original="http://tp1.sinaimg.cn/1823650080/50/5716127990/1"></a><a href="http://www.html-js.com/user/575" data-original-title="小前端一枚" class="tooltip-trigger"><img data-original="http://tp1.sinaimg.cn/3473034184/50/40024593772/0" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/0" style="display: inline;"></a><a href="http://www.html-js.com/user/5922" data-original-title="道理我都懂" class="tooltip-trigger"><img data-original="http://tp3.sinaimg.cn/1930795102/50/5702261736/1" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(1)" style="display: inline;"></a><a href="http://www.html-js.com/user/5639" data-original-title="我要做web前端！" class="tooltip-trigger"><img data-original="http://tp2.sinaimg.cn/5479886185/50/5716256372/1" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(2)" style="display: inline;"></a><a href="http://www.html-js.com/user/2619" data-original-title="在路上，奔跑吧。" class="tooltip-trigger"><img data-original="http://tp1.sinaimg.cn/1681452992/50/5623128906/1" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(3)" style="display: inline;"></a><a href="http://www.html-js.com/user/6159" data-original-title="" class="tooltip-trigger"><img data-original="http://tp2.sinaimg.cn/1771176701/50/5710163838/1" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1(4)" style="display: inline;"></a></span>
              </div>
              <div class="actions"><a target="_blank" href="http://service.weibo.com/share/share.php?url=http%3A%2F%2Fwww.html-js.com%2Farticle%2F2953&amp;title=%E5%88%86%E4%BA%AB%E4%B8%80%E7%AF%87@%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%20%E7%9A%84%E5%8E%9F%E5%88%9B%E6%96%87%E7%AB%A0%E3%80%90%E5%89%8D%E7%AB%AF%E5%B7%A5%E4%BD%9C%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93%20Front-end-Developer-Interview-Questions%E3%80%91%E6%9D%A5%E8%87%AA@%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%20%E4%B8%93%E6%A0%8F%E3%80%8C%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%E5%AE%98%E6%96%B9%E3%80%8D%20%E3%80%82%E5%89%8D%E7%AB%AF%E4%B9%B1%E7%82%96%E6%98%AF%E4%B8%80%E4%B8%AA%E4%B8%93%E4%B8%9A%E7%9A%84%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E5%8E%9F%E5%88%9B%E5%86%85%E5%AE%B9%E7%A4%BE%E5%8C%BA&amp;pic=http://www.html-js.com/uploads/article_thumb/2953.png&amp;appkey=659341943" class="action"><i class="icon-new-window"></i><em style="background:none !important;float:none;display:inline;padding:0;" class="bds_more">分享到微博</em></a><a href="javascript:void(0);" class="add_fav action"><em>收藏</em> <span>7</span></a>
              </div>
            </div>
          </div>
          <div id="fixed-modules" class="fixed" style="position: fixed; top: 0px;"><a target="_blank" href="http://www.appcan.cn/" style="width:100%;display:block;" class="ad-blank"><img src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1430307535247-前端乱炖.gif"></a><a target="_blank" href="http://www.jiankongbao.com/" style="width:100%;display:block;" class="ad-blank"><img src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/1461145783134-4e913d3582645ce5b5e12859c8b62b94.jpg"></a>
            <!--a.ad-blank(target="_blank",href="https://coding.net/marketing/codeinsight?hmsr=http%3A%2F%2Fwww.html-js.com%2F&hmmd=%E5%9B%BE%E7%89%87%E5%B9%BF%E5%91%8A&hmpl=CodeInsight&hmkw=&hmci=",style="width:280px;height:120px;display:block;")-->
            <!--  img(src="http://htmljs.b0.upaiyun.com/uploads/1425371986895-coding.png")-->
          </div>
        </div>
      </div>
      <p>
        <script id="bdshare_js" data="type=tools&amp;uid=2555549" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/bds_s_v2.js"></script>
        
        <script type="text/javascript">
        var bds_config={"bdText":"分享一篇@前端乱炖 的原创文章【前端工作面试问题总结 Front-end-Developer-Interview-Questions】来自@前端乱炖 专栏「前端乱炖官方」 {{前端乱炖是国内最专业的前端知识原创内容社区}}","bdPic":"http://www.html-js.com/uploads/article_thumb/2953.png","snsKey":{'tsina':'659341943','tqq':'','t163':'','tsohu':''}}
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
        </script>
      </p>
      <script id="tip_tpl" type="text/template">
        {{#tips}}
          <li class="ng-scope single-comment pin-comment">
            <div class="comment-body ng-binding" >{{content}}</div>
            <div class="comment-meta">
              <span class="author-name ng-binding">— {{user_nick}} </span>
              <time class="create-time" >{{time}}</time>
            </div>
          </li>
          {{/tips}}
      </script>
    </div>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/mustache.js"></script>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/messageTip.js"></script><div class="message-tip" style="display: none;">欢迎光临</div>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/loadingTip.js"></script><div class="loading-tip">正在加载中。。。</div>
    <script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/lazyload.js"></script>
    <script>
      $(window).scroll(function(){
        if($(window).scrollTop()+$(window).height()>=$(".comment").offset().top){
          $(".comment-layer").addClass("hidden")
        }else{
        $(".comment-layer").removeClass("hidden")
        }
        })
      $(".comment-layer").click(function(){
        $("html,body").animate({
          scrollTop:$(".comment").offset().top-200
          })
        $(".comment textarea").focus()
        })
      var comment_tpl = $("#comment-tpl").html()
      //- loadingTip.show("评论加载中")
      //- $.ajax({
      //-   url:"/comment/article_2953",
      //-   type:"get",
      //-   dataType:"json",
      //-   success:function(data){
      //-     loadingTip.hide("正在提交中")
      //-       if(data.success){
      //-       for(var i=0;i<data.comments.length;i++){
      //-       var comment = data.comments[i]
      //-         var html = Mustache.render(comment_tpl,comment);
      //-         $(".comment-list").append(html)
      //-         $(".reply").click(function(){
      //-   $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
      //-    $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
      //-   })
      //-       }
      //-       }else{
      //-       alert(data.info)
      //-       }
      
      //-   }
      //-   })
      $(".headpic img").lazyload();
      $(".tooltip-trigger img").lazyload();
      $(".reply").click(function(){
        $("#comment-text").val("@"+$(this).attr("data-nick")+" ").focus()
         $("#comment-text")[0].setSelectionRange($("#comment-text")[0].value.length, $("#comment-text")[0].value.length)
        })
      $("#comment-submit").click(function(){
        var text = $("#comment-text").val();
        if(!text){
          messageTip.show("请输入评论内容");
        }else{
          loadingTip.show("正在提交中")
           HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_2953"
           },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
           },function(){
           
            },null,function(){
            HtmlJS.util.ajax("/comment/add",{
              md:text,
              target_id:"article_2953"
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                $("#comment-text").val("")
                var html = Mustache.render(comment_tpl,data.comment);
                  $(".comment-list").prepend(html)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
        }
        })
        
        $(".zan").click(function(){
          var self = this;
            HtmlJS.util.ajax("/article/2953/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            HtmlJS.util.ajax("/article/2953/zan",{
              score:$(self).attr("data-index")
            },"post",function(data){
              loadingTip.hide()
                if(data.success){
                  messageTip.show("成功！")
                    $("em",self).html("已赞")
                    $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){
            
            },null,function(){
            
          })
          })
          })
          $('.user').tooltip({
          placement:"bottom"
          });
          $(".add_fav").click(function(){
            var self=this;
            HtmlJS.util.ajax("/user/fav",{
              uuid:"a5eb23a8-558d-4f1a-ade6-90fb70e5edae"
            },"post",function(data){
                loadingTip.hide()
                if(data.success){
                  messageTip.show("收藏成功！")
                    $("em",self).html("已收藏")
                     $("span",self).html($("span",self).html()*1+1)
                }else{
                  alert(data.info)
                }
            },function(){},null,function(){
                HtmlJS.util.ajax("/user/fav",{
                  uuid:"a5eb23a8-558d-4f1a-ade6-90fb70e5edae"
                },"post",function(data){
                    loadingTip.hide()
                    if(data.success){
                      messageTip.show("收藏成功！")
                         $("em",self).html("已收藏")
                          $("span",self).html($("span",self).html()*1+1)
                    }else{
                      alert(data.info)
                    }
                },function(){
                })
            })
            });
            $(document).ready(function(){
                if($(window).width()>600){
                  new Tip().init({
                      selector:".post",
                      url:"/tip/add",
                      uuid:"2953"
                  })
                }
                
            })
            
    </script>
    <div id="footer">
      <div class="wrapper">
        <div class="module">
          <div style="font-size:12px;line-height:20px;">Power By NodeJS，本站所有代码的地址在<a href="https://github.com/xinyu198736/htmljs" target="_blank">这里</a>  浙ICP备12047043号  <a href="http://www.html-js.com/friendlink">友情链接</a>  <a href="https://f2e.souche.com/blog" target="_blank">大搜车前端团队博客</a></div>
        </div>
      </div>
    </div>
    <div id="coin-fixed"><span id="gotop"><i class="icon-airplane"></i></span><span class="my-favs"><i class="icon-heart"></i><a href="http://www.html-js.com/user/fav"> 我的收藏      </a></span>
    </div>
    <script>
      try{
        $('.tooltip-trigger').tooltip({
              placement:"bottom"
              });
      }catch(e){};
      
      
      
    </script>
    <div class="hidden">
      <script>
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F2fc2fae0509f820259c1760fce28d7d2' type='text/javascript'%3E%3C/script%3E"));
        
      </script><script src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/h.js" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=2fc2fae0509f820259c1760fce28d7d2" target="_blank"><img border="0" src="./前端工作面试问题总结 Front-end-Developer-Interview-Questions - 前端乱炖官方 - 前端乱炖_files/21.gif" width="20" height="20"></a>
    </div>
  
</body></html>